﻿<!DOCTYPE html>
<html lang="en">
<head>
	<title>cross-universe</title>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!-- 如果当前环境是IE则设置为IE最高版本 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
	<!-- 设置视口大小与屏幕相同 -->
	<meta name="viewport"
				content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<!-- 禁止缓存 -->
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-store, must-revalidate"/>
	<meta http-equiv="expires" content="0"/>
	<!-- 禁止识别电话号，邮件，地点(跳转至地图) -->
	<meta name="format-detection" content="telephone=no, email=no, adress=no" searchtype="map">
	<!-- 删除默认的苹果工具栏和菜单栏 -->
	<meta name="apple-mobile-web-app-capable" content="no">
	<!-- 控制状态栏显示样式 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<style>
		* {
			padding: 0;
			margin: 0;
		}
        .abs {
            position: absolute;
        }
        canvas {
            top:0;
            left:0;
            position: absolute;
        }
        #musicico {
            width: 8%;
            right: 4%;
            top: 4%;
            z-index: 99999;
        }
        .music_roll {
            -webkit-animation: 2.5s linear music_kf 0s infinite;
        }

        @-webkit-keyframes music_kf {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }
	</style>
    <script src="//qiniu.grandhelm.com/lib/vconsole/vconsole.min.js"></script>
</head>
<body>
    <img src="img/music-play.png" class="abs music_roll" id="musicico">
    <audio src="bg_small.mp3" id="musicBgm" loop="loop" preload="auto" autoplay="autoplay" style="display:none;"></audio>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script src="//qiniu.grandhelm.com/lib/Tween/Tween.min.js"></script>
<script src="//qiniu.grandhelm.com/lib/RequestAnimationFrame/RequestAnimationFrame.min.js"></script>
<!--<script src="//qiniu.grandhelm.com/lib/AlloyFinger/alloy_finger.min.js"></script>-->
<script src="//qiniu.grandhelm.com/lib/sphoords/sphoords.min.js"></script>
<script>
	// 指定范围内生成随机小数
	var randomFloat = function (min, max) {
		return Math.random() * (max - min) + min;
	};
	// 指定范围内，超过指定半径的随机小数
	var randomPos = function (min, max, border) {
		for (var num = randomFloat(min, max); num > border || num < -border; num = randomFloat(min, max)) {
			return num;
		}
    };
    //指定返回不超过指定范围的x
    var stayBetween = function (x, min, max) {
        return Math.max(min, Math.min(max, x));
    };

	// 变量
	var rendererWidth = document.documentElement.clientWidth < 640 ? document.documentElement.clientWidth : 640,
					rendererHeight = document.documentElement.clientHeight,
					cameraMaxZ = 1000,
					cameraStartZ = cameraMaxZ / 3,
					geometryCountRound = 50,
                    geometryCountCenter = 20;
    document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px';
    document.getElementsByTagName('body')[0].style.width = window.innerWidth + 'px';  

	// 场景
	var scene = new THREE.Scene();
	// 背景图片
    var bggeometry1 = new THREE.BoxBufferGeometry(rendererWidth * 4, rendererHeight * 4, 1);
	var texture1 = new THREE.TextureLoader().load('./img/bg.jpg');
    var material1 = new THREE.MeshBasicMaterial({ map: texture1 });
    var bgmesh1 = new THREE.Mesh(bggeometry1, material1);
    scene.add(bgmesh1);
    var bggeometry2 = new THREE.BoxBufferGeometry(rendererWidth * 6, rendererHeight * 6, 1);
    var texture2 = new THREE.TextureLoader().load('./img/bg2.jpg');
    var material2 = new THREE.MeshBasicMaterial({ map: texture2 });
    var bgmesh2 = new THREE.Mesh(bggeometry2, material2);
    bgmesh2.position.z = cameraStartZ + (cameraMaxZ - cameraStartZ) * 1 / 3;
    scene.add(bgmesh2);
    var bggeometry3 = new THREE.BoxBufferGeometry(rendererWidth * 9, rendererHeight * 9, 1);
    var texture3 = new THREE.TextureLoader().load('./img/bg3.jpg');
    var material3 = new THREE.MeshBasicMaterial({ map: texture3 });
    var bgmesh3 = new THREE.Mesh(bggeometry3, material3);
    bgmesh3.position.z = cameraStartZ + (cameraMaxZ - cameraStartZ) * 2 / 3;
    scene.add(bgmesh3);

	// 几何体，宽度高度
	var geometry = new THREE.PlaneBufferGeometry(30, 30);
	// 皮肤
	var materialArr = [];
	for (var i = 1; i <= 13; i++) {
		var textureLoader = new THREE.TextureLoader().load('./img/' + i + '.png');
		var material = new THREE.MeshBasicMaterial({map: textureLoader});
		material.transparent = true;
		materialArr.push(material);
	}
	// 远处物体
	for (var i = 0; i < geometryCountRound; i++) {
		var mesh = new THREE.Mesh(geometry, materialArr[Math.floor(randomFloat(0, materialArr.length - 1))]);
		mesh.position.x = randomPos(-300, 300, 30);
		mesh.position.y = randomPos(-300, 300, 30);
		mesh.position.z = cameraStartZ - 200 + (cameraMaxZ - cameraStartZ) * i / geometryCountRound;
		scene.add(mesh);
	}
	// 中心物体
	for (var i = 0; i < geometryCountCenter - 1; i++) {
		var mesh = new THREE.Mesh(geometry, materialArr[Math.floor(randomFloat(0, materialArr.length - 1))]);
		mesh.position.x = randomPos(-15, 15, 1);
		mesh.position.y = randomPos(-15, 15, 1);
		mesh.position.z = (cameraStartZ - 50) + (cameraMaxZ - cameraStartZ) * i / geometryCountCenter;
		scene.add(mesh);
	}
	// 文字
	var geometry = new THREE.PlaneBufferGeometry(30, 10);
	var textureLoader = new THREE.TextureLoader().load('./img/name.png');
	var material = new THREE.MeshBasicMaterial({map: textureLoader});
	material.transparent = true;
	var wordMesh = new THREE.Mesh(geometry, material);
	wordMesh.position.x = 0;
	wordMesh.position.y = 20;
	wordMesh.position.z = cameraMaxZ - 60;
	scene.add(wordMesh);

	// 相机
	var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, cameraMaxZ);
    camera.position.z = cameraStartZ;

	// 渲染器
	var renderer = new THREE.WebGLRenderer({
		antialias: false,       //是否开启反锯齿
		precision: "highp",    //着色精度选择
		alpha: true,           //是否可以设置背景色透明
		premultipliedAlpha: false,
		stencil: false,
		preserveDrawingBuffer: true, //是否保存绘图缓冲
		maxLights: 1           //maxLights:最大灯光数
	});
	renderer.setSize(rendererWidth, rendererHeight);
	renderer.setClearColor(0x000000, 0.9);
    document.body.appendChild(renderer.domElement);
    
    var movetween = new TWEEN.Tween({ z: cameraStartZ })
        .to({ z: cameraMaxZ }, 20000)
        .delay(1000)
        .onUpdate(function () {
            camera.position.z = this.z;
            renderer.render(scene, camera);
        })
    var wordtween = new TWEEN.Tween({ z: 30 })
        .to({ z: 0 }, 1000)
        .onUpdate(function () {
            wordMesh.rotation.z = this.z;
            renderer.render(scene, camera);
        })
    var lasttween = new TWEEN.Tween({ z: 0 })
        .to({ z: 0 }, 1000000)
        .onUpdate(function () {
            renderer.render(scene, camera);
        })
    movetween.chain(wordtween);
    wordtween.chain(lasttween);
    movetween.start();

    requestAnimationFrame(animate);
    function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
    }

    var sphoords = new Sphoords();
    var initlng = 1000, initlat = 1000;

    (function () {
        var onDeviceOrientation = function (coords) {
            if (initlng == 1000)
            {
                initlng = coords.longitude;
                initlat = coords.latitude;
            }
            var lngdiff = (initlng - coords.longitude + (Math.PI * 2)) % (Math.PI * 2);
            var latdiff = (coords.latitude - initlat + Math.PI) % Math.PI;
            camera.position.x = (lngdiff - (lngdiff > Math.PI ? Math.PI * 2 : 0)) * 20;
            camera.position.y = (latdiff - (latdiff > Math.PI / 2 ? Math.PI : 0)) * 20;
        };
        sphoords.addListener(onDeviceOrientation);
        setTimeout("sphoords.start();", 500);

        var isPlay = 0;
        function indexMusic() {
            if (typeof WeixinJSBridge === "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                }
            } else {
                onBridgeReady();
            }
            function onBridgeReady() {
                document.getElementById("musicBgm").play();
            }
            document.getElementById("musicico").addEventListener('click', function (e) {
                if (isPlay == 0) {
                    document.getElementById("musicBgm").pause();
                    var thisele= document.getElementById("musicico");
                    thisele.setAttribute("src", "img/music-stop.png");
                    thisele.setAttribute("class", "abs");
                    isPlay = 1;
                } else {
                    document.getElementById("musicBgm").play();
                    var thisele = document.getElementById("musicico");
                    thisele.setAttribute("src", "img/music-play.png");
                    thisele.setAttribute("class", "abs music_roll");
                    isPlay = 0;
                }
            });
        }
        indexMusic();
    })();
</script>
</body>
</html>